<template>
  <PageMain :before-back="titleBeforeBack">
    <template #header></template>
    <template #body>
      <div class="report-content">
        <div class="report-content-info">
          <a-row class="topBox">
            <a-col :span="2">
              <div class="imgBox">
                <img :src="logo" />
              </div>
            </a-col>
            <a-col :span="20" class="padd">
              <a-row>
                <a-col :span="11" >
                  <div class="boxItem">
                    <span class="title">资产所属组织</span>
                    <span class="cont">{{ detailInfo.owner }}</span>
                  </div>
                  <div class="boxItem">
                    <span class="title">统一社会信用代码</span>
                    <span class="cont">{{ detailInfo.credit_code }}</span>
                  </div>
                  <div class="boxItem">
                    <span class="title">注册地</span>
                    <span class="cont">{{ detailInfo.registered_address }}</span>
                  </div>
                </a-col>
                <a-col :span="11" :offset="1">
                  <div class="boxItem">
                    <span class="title">申请时间</span>
                    <span class="cont">{{ detailInfo.application_time }}</span>
                  </div>
                  <div class="boxItem">
                    <span class="title">登记时间</span>
                    <span class="cont">{{ detailInfo.registration_time }}</span>
                  </div>
                  <div class="boxItem">
                    <span class="title">证书编号</span>
                    <span class="cont">{{ detailInfo.certificate_no }}</span>
                  </div>
                </a-col>
                <a-col :span="22">
                  <div class="boxItem">
                    <span class="title">证书Hash</span>
                    <span class="cont">{{ detailInfo.certificate_hash }}</span>
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="证书详情">
            <a-row v-auth="['module', '资产管理-资产登记-查看证书-登记文件']">
              <a-col :span="6" class="borderStyle">
                <div class="info-title">
                  <span class="info-title-select">选择文件</span>
                  <FileMultiUpload
                    :uploadType="'registration'"
                    :multiple="true"
                    :limit="10"
                    :show-file-list="false"
                    :auto-upload="false"
                    v-auth="['button', '资产管理-资产登记-查看证书-登记文件-上传']"
                    @upload="uploadData"
                  >
                    <template #upload-content>
                      <div class="upload-icon">
                        <IconPlus />
                      </div>
                    </template>
                  </FileMultiUpload>
                </div>
                <div style="width: 100%; height: 50vh">
                  <a-menu class="a-menu-vertical-demo" @menuItemClick="handleMenuSelect">
                    <a-menu-item v-for="(item, index) in detailInfo.file_data" :key="index">
                      <div class="file-item">
                        <img v-if="item.file_name.includes('.pdf')" src="" alt="" srcset="" />
                        <img v-else-if="item.file_name.includes('.png')" src="" alt="" srcset="" />
                        <img v-else-if="item.file_name.includes('.doc')" src="" alt="" srcset="" />
                        <img v-else src="" alt="" srcset="" />
                        <span class="title">{{ item.file_name }}</span>
                        <a-space size="large">
                          <a-dropdown-button @select.stop="handleSelect">
                            <template #content>
                              <a-doption>
                                <span class="sel-text">{{ index }}</span>
                                <icon-download />
                                <span class="sel-text">-d</span>
                              </a-doption>
                              <a-doption>
                                <span class="sel-text">{{ index }}</span>
                                <icon-delete />
                                <span class="sel-text">-e</span>
                              </a-doption>
                            </template>
                          </a-dropdown-button>
                        </a-space>
                      </div>
                    </a-menu-item>
                  </a-menu>
                </div>
              </a-col>
              <a-col :span="17" :offset="1">
                <vue-office-docx
                  :src="docx"
                  class="view-h"
                  @rendered="renderedHandler"
                  @error="errorHandler"
                  v-if="isDocx"
                />
                <vue-office-pdf
                  :src="pdf"
                  @rendered="renderedHandler"
                  @error="errorHandler"
                  v-if="isPdf"
                />
                <vue-office-excel
                  :src="excel"
                  class="view-h"
                  @rendered="renderedHandler"
                  @error="errorHandler"
                  v-if="isExcel"
                />
                <img :src="imgUrl" v-if="isImg" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" title="关联资产">
            <ModuleBlock
              :checkPermission="['button', '资产管理-资产登记-查看证书-关联资产-查看']"
              :data="detailInfo.asset_package_data"
            ></ModuleBlock>
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>
  </PageMain>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import PageMain from '@/components/PageBox.vue';
import { IconPlus } from '@arco-design/web-vue/es/icon';
import FileMultiUpload from '@/components/FileMultiUpload.vue';
import VueOfficeDocx from '@vue-office/docx';
import VueOfficePdf from '@vue-office/pdf';
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/docx/lib/index.css';
import '@vue-office/excel/lib/index.css';
import '@vue-office/docx/lib/index.css';
import ModuleBlock from './components/ModuleBlock.vue';
import { Message } from '@arco-design/web-vue';
import {
  registration_detail,
  registration_download,
  file_Add,
  file_delete
} from '@/api/resource_registration/resource_registration';
import { useRoute } from 'vue-router';
const route = useRoute();
const detailInfo = reactive({
  id: 0,
  name: '环境监测洞察登记',
  number: '',
  owner: '上海鸿运佳美环境科技有限公司',
  owner_icon: ['e694734f-aaa9-4a2d-8b88-0e582710cfc4|1026-1.png'],
  registered_address: '上海市静安区江宁路789号',
  registration_time: '2024-05-01',
  application_time: '2024-04-02',
  certificate_hash: 'a5a596a8f7b65a5124b8de22ab2c68544c23abfcdf9a4ff01723f77a2f7646cd',
  certificate_no: '8521-3698-7412-3658',
  credit_code: '91310102MA1G1W9E3A',
  asset_package_data: [
    {
      asset_package_code: 'ZY10320240516124218',
      asset_package_desc: '分析教育统计数据，为教育管理者和政策制定者提供教育发展的洞察和建议。',
      asset_package_name: '教育数据洞察',
      asset_package_version: 1
    },
    {
      asset_package_code: 'ZY10320240516124218',
      asset_package_desc: '分析教育统计数据，为教育管理者和政策制定者提供教育发展的洞察和建议。',
      asset_package_name: '教育数据洞察',
      asset_package_version: 1
    },
    {
      asset_package_code: 'ZY10320240516124218',
      asset_package_desc: '分析教育统计数据，为教育管理者和政策制定者提供教育发展的洞察和建议。',
      asset_package_name: '教育数据洞察',
      asset_package_version: 1
    },
    {
      asset_package_code: 'ZY10320240516124218',
      asset_package_desc: '分析教育统计数据，为教育管理者和政策制定者提供教育发展的洞察和建议。',
      asset_package_name: '教育数据洞察',
      asset_package_version: 1
    },
    {
      asset_package_code: 'ZY10320240516124218',
      asset_package_desc: '分析教育统计数据，为教育管理者和政策制定者提供教育发展的洞察和建议。',
      asset_package_name: '教育数据洞察',
      asset_package_version: 1
    },
    {
      asset_package_code: 'ZY10320240516124218',
      asset_package_desc: '分析教育统计数据，为教育管理者和政策制定者提供教育发展的洞察和建议。',
      asset_package_name: '教育数据洞察',
      asset_package_version: 1
    }
  ],
  file_data: [
    {
      file_name: '数据资产登记证书',
      children: [
          {
          file_name: '企业会计准则第1号——存货（2006）.docx',
          file_url:
            'http://oa.aasunit.com:9000/asset-registration/103/b6c2f9db9b6abdd6c58ae645772d657ef94ad175b0d7089021cc3ad30b1bc10c?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=j3N4PRzzZMeLoo6tKlCA%2F20240609%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240609T055636Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=5639f255887a27113e4938de4642387a28037e4acc7004525dd2178126fed4ca',
          id: 10
        },
        {
          file_name: '凭证100.8元.pdf',
          file_url:
            'http://oa.aasunit.com:9000/asset-registration/103/ec9fbb8f2d68a868cefe7421c52aa68e0c560ce2568150f682b417aae6a36deb?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=j3N4PRzzZMeLoo6tKlCA%2F20240607%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240607T082737Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=6830e34e728d258e8196bbf04ff8f65ec832d8dbd4f4acfb45065fb8cd40c864',
          id: 11
        }
      ]
    },
    {
      file_name: '数据资产登记证书',
      children: [
          {
          file_name: '企业会计准则第1号——存货（2006）.docx',
          file_url:
            'http://oa.aasunit.com:9000/asset-registration/103/b6c2f9db9b6abdd6c58ae645772d657ef94ad175b0d7089021cc3ad30b1bc10c?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=j3N4PRzzZMeLoo6tKlCA%2F20240609%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240609T055636Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=5639f255887a27113e4938de4642387a28037e4acc7004525dd2178126fed4ca',
          id: 10
        },
        {
          file_name: '凭证100.8元.pdf',
          file_url:
            'http://oa.aasunit.com:9000/asset-registration/103/ec9fbb8f2d68a868cefe7421c52aa68e0c560ce2568150f682b417aae6a36deb?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=j3N4PRzzZMeLoo6tKlCA%2F20240607%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240607T082737Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=6830e34e728d258e8196bbf04ff8f65ec832d8dbd4f4acfb45065fb8cd40c864',
          id: 11
        }
      ]
    },
   
  ]
});
const logo = ref('');
const docx = ref('');
const excel = ref('');
const pdf = ref('');
const imgUrl = ref('');
const isDocx = ref(false);
const isExcel = ref(false);
const isPdf = ref(false);
const isImg = ref(false);
/**
 * 获取详情信息
 */
const getDetail = () => {
  registration_detail({ id: route.query.id }).then((res) => {
    const { code, data } = res;
    if (code === 200) {
      Object.keys(data).forEach((key) => {
        if (detailInfo.hasOwnProperty(key)) {
          detailInfo[key] = data[key];
        }
      });
      if (detailInfo.owner_icon !== null) getDowndown(detailInfo.owner_icon[0]);
    }
  });
};
/**
 *
 * @param file 删除文件
 */
const delFiles = (id: number) => {
  file_delete({id: id}).then(res => {
    if (res.code === 200) {
      Message.success("文件删除成功")
      getDetail()
    }
  })
};
// 下载图片
const getDowndown = (file: string) => {
  registration_download({ file_name: file }).then((res) => {
    const { code, path } = res;
    if (code === 200) {
      logo.value = import.meta.env.VITE_APP_BASE_URL + '/download/' + path;
    }
  });
};
// 下载文件
const downLoadFiles = (url: string, fileName: string) => {
  const x = new XMLHttpRequest();
  x.open('GET', url, true);
  x.responseType = 'blob';
  x.onload = function () {
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    a.click();
  };
  x.send();
};
/**
 * 下载、删除
 */
const handleSelect = (e) => {
  const selVal = e.split('-');
  const url = detailInfo.file_data[selVal[0]].url;
  const name = detailInfo.file_data[selVal[0]].file_name;
  const id = detailInfo.file_data[selVal[0]].id;
  if (selVal[1] === 'd') {
    downLoadFiles(url, name);
  } else {
    delFiles(id);
  }
};
const handleMenuSelect = (i: string) => {
  console.log(i);
  const index = i == '__arco_menu1' ? 0 : 1;
  if (detailInfo.file_data[index].file_name.indexOf('.xlsx') !== -1) {
    excel.value = detailInfo.file_data[index].file_url;
    isDocx.value = false;
    isPdf.value = false;
    isImg.value = false;
    isExcel.value = true;
  } else if (detailInfo.file_data[index].file_name.indexOf('.docx') !== -1) {
    docx.value = detailInfo.file_data[index].file_url;
    isPdf.value = false;
    isImg.value = false;
    isExcel.value = false;
    isDocx.value = true;
  } else if (detailInfo.file_data[index].file_name.indexOf('.pdf') !== -1) {
    pdf.value = detailInfo.file_data[index].file_url;
    isImg.value = false;
    isExcel.value = false;
    isDocx.value = false;
    isPdf.value = true;
  } else {
    imgUrl.value = detailInfo.file_data[index].file_url;
    isExcel.value = false;
    isDocx.value = false;
    isPdf.value = false;
    isImg.value = true;
  }
};
// 上传文件成功事件
const uploadData = (data: any, sha256: string) => {
  addFiles(data, sha256);
};
// 添加资产合规文件
const addFiles = (data: any, sha256: string) => {
	const params = {
		asset_registration_id: detailInfo.id,
		file_name: data,
		file_sha_256: sha256
	}
  file_Add(params).then(res => {
    const { code, message } = res;
	if (code === 200) {
		getDetail()
	} else {
		Message.warning(`${message}`)
	}
})
}
const renderedHandler = () => {
  console.log('渲染完成');
};
const errorHandler = () => {
  console.log('渲染失败');
};
onMounted(() => {
  // getDetail()
});
</script>
<style lang="less" scoped>
.report-content {
  padding: 20px 24px;
  .padd {
    padding-top: 10px;
  }
  &-info {
    background: #f7f9fc;
    padding: 20px;
    border-radius: 8px;
    .imgBox {
      width: 104px;
      height: 133px;
      margin-right: 20px;
      background: rgba(55, 77, 115, 0.1);
      img {
        width: 100%;
      }
    }
    .boxItem {
      font-size: 14px;
      color: #465a80;
      padding: 5px 0;

      .title {
        line-height: 19px;
        padding-right: 15px;
      }

      .cont {
        line-height: 19px;
        font-weight: 500;
      }
    }
  }
}
.borderStyle {
  border-right: 1px solid #ebf0fa;
}
.info-title {
  display: flex;
  justify-content: space-between;
  &-select {
    color: #394d73;
    font-size: 16px;
    font-weight: bold;
  }
}
.upload-icon {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}
.arco-tabs-content {
  padding-bottom: 0;
}
:deep(.arco-menu-item) {
  padding: 0;
}
:deep(.arco-btn-size-medium.arco-btn-only-icon)  {
  padding-top: 15px;
}
:deep(.arco-btn-secondary[type='button']) {
  background: transparent;
  border-right: none;
}
:deep(.arco-btn-icon) {
  transform: rotate(90deg);
}
:deep(.arco-menu-vertical .arco-menu-item:not(.arco-menu-has-icon)) {
  &:hover {
    background: rgba(240, 244, 250, 1);
  }
}
:deep(.arco-menu-light .arco-menu-item.arco-menu-selected) {
  background: rgba(22, 93, 255, 0.1);
}
.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 20px;

  img {
    width: 25px;
    height: 25px;
  }

  .title {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .icons {
    width: 15%;
  }
}
.sel-text {
  opacity: 0;
}
.view-h {
  height: 60vh;
}
</style>
